import { useState, useEffect, useMemo } from 'react';
import { Button, Image } from 'antd';
import CommonTable from '@/components/CommonTable';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { getLogDataOp } from '../../../service';
import styles from './index.module.less';
import { useNavigate } from 'react-router-dom';

const refundStateMap = {
  10:'待登记',
  20:'部分登记',
  30:'处理中',
  40:'处理完成',
  50:'已取消',
  0:'待商家处理',
  1:'商家已拒绝',
  2:'待买家退货',
  3:'待商家收货',
  4:'退款成功',
  5:'退款关闭',
  6:'待商家寄出',
  7:'待买家收货换货成功',
  8:'换货失败',
}

export default ({ visible, handleCancel }) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  const navigate = useNavigate();
  const { refundOrderSn, afterSalesTypeName, channelId, channelName, refundOrderGoodsList = [], refundState, rejectReason, rejectImg } = visible;

  useEffect(()=>{
     getLogDataFunc();
  },[])

  const getLogDataFunc = async () => {
    setLoading(true);
    const { data, success } = await getLogDataOp({orderNo: refundOrderSn, logType: 1});
    if(success){
      setData(data);
    }
    setLoading(false);
  }

  const handlePayOrderClick = val => {
    navigate(`/account/balance?payOrder=${val}`);
  }

  const columns = [
    {
      title: '操作人账号',
      dataIndex: "userAccount",
      key: "userAccount",
      width: 128,
    },
    {
      title: '操作类型',
      dataIndex: "operationType",
      key: "operationType",
      width: 128,
    },
    {
      title: '操作事件',
      dataIndex: "eventContent",
      key: "eventContent",
      width: 263,
      render: text => {
        if(text && (/\<html\>/).test(text) && (/\<\/html\>/).test(text)){
          const index1 = text.match(/\<html\>/)?.index, index2 = text.match(/\<\/html\>/)?.index, val = text.slice(index1+6,index2);
          return (<>
          {text.slice(0,index1)}
          <span className='common-color1' onClick={()=>handlePayOrderClick(val)} style={{cursor:'pointer'}}>{val}</span>
          {text.slice(index2+7)}
          </>)
        }else{
          return text;
        }
      }
    },
    {
      title: '操作时间',
      dataIndex: "createTime",
      key: "createTime",
      width: 160
    }
  ]

  //渲染退货凭证
  const renderRefundRroof = useMemo(() => {
    if (rejectImg) {
      // const imgArr = JSON.parse(rejectImg);
      const imgArr = rejectImg.split(',');
      return (
        <div className={styles.imgFlex}>
          {imgArr.map(item => {
            return <Image src={item} className={styles.imgStyle} key={item}/>
          })}
        </div>
      )
    } else {
      return ''
    }
  },[rejectImg])

  const tableProps = {
    data,
    columns,
    scroll:{y:480}
  }

  return (<>
    <CommonModal
      title="售后申请单"
      visible={visible}
      width='756px'
      onCancel={handleCancel}
      footer={[<Button key='cancel' onClick={handleCancel}>关闭</Button>]}
    >
      <div className={styles.flexWrapper}>
        <div className={styles.flexBlockItem}>退货单号：{refundOrderSn}</div>
        <div className={styles.flexItem}>售后类型：{afterSalesTypeName}</div>
        <div className={styles.flexItem}>发货渠道：{channelId ? channelName : `${refundOrderGoodsList[0]?.storeName}(直发)`}</div>
        <div className={styles.flexBlockItem}>售后单状态：{refundStateMap[refundState]}</div>
        {refundState == 1 && (<>
          <div className={styles.flexBlockItem}>拒绝原因：{rejectReason}</div>
          <div className={styles.flexBlockItem}>拒绝凭证：{renderRefundRroof}</div>
        </>)}
      </div>
      <h3 style={{marginBottom:'12px'}}>日志:</h3>
      <CommonTable {...tableProps} />
      <CommonLoading loading={loading} />
    </CommonModal>
  </>)

}